<template>
    <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="banner in banners" :key="banner.id">
      <router-link :to="`/bannerArticle/${banner.id}`">
      <el-image :src="banner.imageUrl"   style="object-fit: cover; width: 100%; height: 100%;"
                 @click="showArticles(banner.id)">
      </el-image>
      </router-link>
    </el-carousel-item>
  </el-carousel>
</template>
<script setup>
import banner1 from '@/assets/banner/banner01.jpg'
import banner2 from '@/assets/banner/banner02.jpg'
import banner3 from '@/assets/banner/banner03.jpg'
import banner4 from '@/assets/banner/banner04.jpg'
import banner5 from '@/assets/banner/banner05.jpg'
import banner6 from '@/assets/banner/banner06.jpg'
import router from "@/router";
const banners = [
  {
    id: 1,
    imageUrl: banner1,
    alt: "VIP推荐计划: VIP抵押借币限时降息，更低折扣等你来！",
  },
  {
    id: 2,
    imageUrl: banner2,
    alt: "YOSHI TOKEN：索马里粮食危机救援项目",
  },
  {
    id: 3,
    imageUrl: banner3,
    alt: "量化超级福利周：盈多少双倍奖，手续费最高返现40%！",
  },
  {
    id: 4,
    imageUrl: banner4,
    alt: "限时奖励$15: 财富管理 通过财富管理获得源源不断的回报",
  },{
    id:5,
    imageUrl: banner5,
    alt: "定投大奖狂欢: 100%中奖抽奖狂欢节"
  },
  {
    id:6,
    imageUrl: banner6,
    alt:"主流货币疯狂星期五: 定投大獎狂歡，贏取 $35,000 獎金"
  }
];
const showArticles = (id) => {
  router.push(`/bannerArticle/${id}`);
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
</style>